<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>FormJsonCsrfPage</title>
        <style>
            .from-style {
            margin-left: auto;
            margin-right: auto;
            margin-top: 60px;
            max-width: 500px;
            background: #555;
            padding: 20px 30px 20px 30px;
            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #D3D3D3;
            text-shadow: 1px 1px 1px #444;
            border: none;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            }
            .from-style h1 {
            padding: 0px 0px 10px 40px;
            display: block;
            border-bottom: 1px solid #444;
            margin: -10px -30px 30px 70px;
            }
            .from-style label {
            display: block;
            margin: 0px 0px 5px;
            }
            .from-style label>span {
            float: left;
            width: 20%;
            text-align: right;
            padding-right: 5px;
            margin-left: -50px;
            margin-top: 10px;
            font-weight: bold;
            font-size: 15px;
            }
            .from-style input[type="text"]{
            border: none;
            color: #525252;
            height: 25px;
            line-height:15px;
            margin-bottom: 16px;
            margin-right: 6px;
            margin-top: 2px;
            outline: 0 none;
            padding: 5px 0px 5px 5px;
            width: 70%;
            border-radius: 2px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            background: #DFDFDF;
            }
            .from-style .button {
            background: #ebe9e5;
            border: none;
            padding: 10px 25px 10px 25px;
            margin-left: 130px;
            color: #585858;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            font-weight: bold;
            box-shadow: 1px 1px 1px #3D3D3D;
            -webkit-box-shadow:1px 1px 1px #3D3D3D;
            -moz-box-shadow:1px 1px 1px #3D3D3D;
            }
            .from-style .button:hover {
            color: #333;
            background-color: #EBEBEB;
            }
        </style>
    </head>
    <body>
        <div style="float: left; width: 500px; height: 200px;">
            <label>
                <span style="margin-left:60px;font-size: 10px; color:green;">说明:通过提交text/plain格式数据,配合标签闭合的方式形成JSON数据</span>
            </label>
            <p>
            <label>
                <span style="margin-left:60px;font-size: 10px;color:green;">例如:参数名称为{"p1":" 参数值为v1"},闭合后为{"p1":"v1"}</span>
            </label>
        </div>
        <form class="from-style" action="/csrf/formjsoncsrf" method="post" >
            <h1>生成FormJSON型CSRF页面</h1>
            <label>
            <span>url地址:</span>
            <input id="address" type="text" name="address" placeholder="url地址" />
            </label>
            <label>
            <span>参数名称:</span>
            <input id="params" type="text" name="params" placeholder='{"p1":"v1","p2":"' />
            </label>
            <label>
            <span>参数值:</span>
            <input id="params" type="text" name="value" placeholder='v2"}' />
            </label>
            <label>
            <input type="submit" class="button" value="生成CSRF页面" />
            </label>
            </form>
    </body>
</html>